<template>
	<view>
		<Header :showBack="false" title="分类"></Header>
		<view class="box" :style="{'height': 'calc(100vh - ' + statusBarHeight + 'px - 120rpx)' }">
			<view>
				<view  @click="changeIndex(index)" :class="{'active':index==curIndex}" v-for="(item,index) in menuList" :key="index">
					{{item.ctName}}
				</view>
			</view>
			<view>
				<view class="item" @click="toInfo(item.id)" v-for="(item,index) in shopList" :key="index">
					<image :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.prImgUrl" mode="aspectFill"></image>
					
					<view>
						<view>{{item.prName}}</view>
						<view>{{item.prDescription}}</view>
						<view>￥{{item.prRetailPrice}}</view>
						
						<view @click.stop="addShopCar(item.id)">
							<image src="../static/gouwuche-baise.png" mode=""></image>
						</view>
					</view>
					
				</view>
				
				<view v-show="showQuesheng" class="quesheng">
					这个商家很懒，还没有上架商品
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			menuList:{
				type:Array,
				defualt:[]
			},
		},
		data() {
			return {
				baseUrl:getApp().globalData.baseUrl,
				statusBarHeight:getApp().globalData.statusBarHeight+44,
				curIndex:0,
				shopList:[],
				showQuesheng:false
			}
		},
		mounted() {
			
		},
		methods: {
			addShopCar(id){
				this.$http('/common/api/shopingCart/add',{
					"productId":id,
					"quantity":1
				},res=>{
					uni.showToast({
						icon:'none',
						title:'加入购物车成功'
					})
				})
			},
			getShopList(){
				this.showQuesheng = false
				this.$http('/common/api/commonData/getProductList',{
					"condition":{
					        "tenantId":uni.getStorageSync('tenantId'),
					        "productTypeId":this.menuList[this.curIndex].id,
							"storageMode":3
					    }
				},res=>{
					this.shopList = res.data.items
					if(this.shopList.length==0){
						this.showQuesheng = true
					}
				})
			},
			changeIndex(index){
				this.curIndex = index
				this.getShopList()
			},
			toInfo(id){
				uni.navigateTo({
					url:'/pages/shopMall/shopInfo?id='+ id
				})
			}
		}
	}
</script>

<style scoped lang="less">
.box{
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 182upx 568upx;
	overflow: hidden;
	>view:first-child{
		background-color: #F5F5F5;
		height: 100%;
		overflow: auto;
		>view{
			width: 100%;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 28upx;
		}
		>view.active{
			background-color: #FFFFFF;
			font-weight: 600;
		}
	}
	>view:last-child{
		background-color: #FFFFFF;
		height: 100%;
		overflow: auto;
		width: 100%;
		>view.item{
			width: 100%;
			height: 200upx;
			position: relative;
			display: flex;
			justify-content: space-between;
			padding-left: 20upx;
			align-items: center;
			box-sizing: border-box;
			margin-bottom: 20upx;
			>image{
				width: 140upx;
				height: 140upx;
			}
			>view{
				width: 368upx;
				padding: 0 20upx;
				>view:nth-child(1){
					font-size: 28upx;
					height: 50upx;
					line-height: 50upx;
					color: #555555;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				>view:nth-child(2){
					font-size: 20upx;
					height: 70upx;
					line-height: 35upx;
					color: #999999;
				}
				>view:nth-child(3){
					font-size: 32upx;
					height: 60upx;
					line-height: 60upx;
					color: #FF3C3C;
					font-weight: 600;
					margin: 5upx auto;
				}
				>view:last-child{
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
					position: absolute;
					right: 20upx;
					bottom: 5upx;
					background-color: #5ECC6C;
					padding: 12upx;
					>image{
						width: 36upx;
						height: 36upx;
					}
				}
			}
		}
		>.quesheng{
			width: 100%;
			font-size: 26upx;
			color: #999999;
			padding: 50upx 0;
			text-align: center;
		}
	}
}

</style>
